<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>zTree Demo Program</title>
<link href="css/ztree/zTreeStyle.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery-layout/layout-index.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery-ui/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="css/layout/layout-all.css" rel="stylesheet" type="text/css"/>


<style type="text/css">
div.zTreeDemoBackground {
    height: 600px;
    text-align: left;
    width: 600px;
}
ul.ztree {
    background: none repeat scroll 0 0 #F0F6E4;
    border: 1px solid #617775;
    height: 600px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: scroll;
    width: 600px;
}

div.left {
    float: left;
    width: 650px;
}

div#rMenu {position:absolute; visibility:hidden; top:0; background-color: #555;text-align: left;padding: 2px;}
div#rMenu ul li{
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;

</style>

<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/util/jquery.boxUtil.js"></script>
<script type="text/javascript" src="js/jquery-ui/jquery.ui.dialog.js"></script>

<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.excheck-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript" src="js/ztree/jquery.ztree.exhide-3.5.js"></script>

<script type="text/javascript" src="js/dropdown/dropdown.js"></script>

<script type="text/javascript">

	var setting = {
		async : {
			enable : true ,
			url : '/GPSTree/json/queryNodeById' ,  
			autoParam : ["id" , "name" , "level" , "open"] ,  
			dataFilter : filter 
		} , 

		check : {
			enable :  true
		} , 
		
		callback: {
			onRightClick: OnRightClick ,

			beforeAsync: beforeAsync,
			onAsyncSuccess: onAsyncSuccess,
			onAsyncError: onAsyncError
		
		}
	};

	function filter(treeId , parentNode , responseData) {
		if(!responseData) return null;

		//for(var i = 0 , len = responseData.length ; i < len ; i++) {
		//	responseData[i].name = responseData[i].name.replace(/\.n/g , '.');
		//}

		return responseData;
		
	}

	function OnRightClick(event , treeId , treeNode) {
		if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
			zTree.cancelSelectedNode();
			showRMenu("root", event.clientX, event.clientY);
		} else if (treeNode && !treeNode.noR) {
			zTree.selectNode(treeNode);
			showRMenu("node", event.clientX, event.clientY);
		}
	}

	function beforeAsync() {
		curAsyncCount++;
	}
	
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		curAsyncCount--;
		if (curStatus == "expand") {
			expandNodes(treeNode.children);
		} else if (curStatus == "async") {
			asyncNodes(treeNode.children);
		}

		if (curAsyncCount <= 0) {
			if (curStatus != "init" && curStatus != "") {
				$("#demoMsg").text((curStatus == "expand") ? demoMsg.expandAllOver : demoMsg.asyncAllOver);
				asyncForAll = true;
			}
			curStatus = "";
		}
	}

	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
		curAsyncCount--;

		if (curAsyncCount <= 0) {
			curStatus = "";
			if (treeNode!=null) asyncForAll = true;
		}
	}

	var curStatus = "init", curAsyncCount = 0, asyncForAll = false,
	goAsync = false;
	function expandAll() {
		if (!check()) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		if (asyncForAll) {
			$("#demoMsg").text(demoMsg.expandAll);
			zTree.expandAll(true);
		} else {
			expandNodes(zTree.getNodes());
			if (!goAsync) {
				$("#demoMsg").text(demoMsg.expandAll);
				curStatus = "";
			}
		}
	}
	function expandNodes(nodes) {
		if (!nodes) return;
		curStatus = "expand";
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for (var i=0, l=nodes.length; i<l; i++) {
			zTree.expandNode(nodes[i], true, false, false);
			if (nodes[i].isParent && nodes[i].zAsync) {
				expandNodes(nodes[i].children);
			} else {
				goAsync = true;
			}
		}
	}

	function asyncAll() {
		if (!check()) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		if (asyncForAll) {
			$("#demoMsg").text(demoMsg.asyncAll);
		} else {
			asyncNodes(zTree.getNodes());
			if (!goAsync) {
				$("#demoMsg").text(demoMsg.asyncAll);
				curStatus = "";
			}
		}
	}
	function asyncNodes(nodes) {
		if (!nodes) return;
		curStatus = "async";
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for (var i=0, l=nodes.length; i<l; i++) {
			if (nodes[i].isParent && nodes[i].zAsync) {
				asyncNodes(nodes[i].children);
			} else {
				goAsync = true;
				zTree.reAsyncChildNodes(nodes[i], "refresh", true);
			}
		}
	}

	function check() {
		if (curAsyncCount > 0) {
			$("#demoMsg").text(demoMsg.async);
			return false;
		}
		return true;
	}

	function showRMenu(type, x, y) {
		$("#rMenu ul").show();
		if (type=="root") {
			$("#m_del").hide();
			$("#m_check").hide();
			$("#m_unCheck").hide();
		} else {
			$("#m_del").show();
			$("#m_check").show();
			$("#m_unCheck").show();
		}
		rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});

		$("body").bind("mousedown", onBodyMouseDown);
	}
	
	function hideRMenu() {
		if (rMenu) rMenu.css({"visibility": "hidden"});
		$("body").unbind("mousedown", onBodyMouseDown);
	}

	var addCount = 1;
	function addTreeNode() {
		hideRMenu();
		var newNode = { name:"增加" + (addCount++)};
		if (zTree.getSelectedNodes()[0]) {
			newNode.checked = zTree.getSelectedNodes()[0].checked;
			zTree.addNodes(zTree.getSelectedNodes()[0], newNode);
		} else {
			zTree.addNodes(null, newNode);
		}
	}
	
	function removeTreeNode() {
		hideRMenu();
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			if (nodes[0].children && nodes[0].children.length > 0) {
				var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";

				$.boxUtil.confirm(msg , '删除提示' , function() {
					zTree.removeNode(nodes[0]);
	            });
				
			} else {
				zTree.removeNode(nodes[0]);
			}
		}
	}
	
	function checkTreeNode(checked) {
		var nodes = zTree.getSelectedNodes();
		if (nodes && nodes.length>0) {
			zTree.checkNode(nodes[0], checked, true);
		}
		hideRMenu();
	}
	
	function resetTree() {
		hideRMenu();
		$.fn.zTree.init($("#treeDemo"), setting);
	}

	
	function onBodyMouseDown(event){
		if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
			rMenu.css({"visibility" : "hidden"});
		}
	}


	var rMenu , zTree;
	$().ready(function() { 
		$.fn.zTree.init($('#treeDemo') , setting);
		zTree = $.fn.zTree.getZTreeObj("treeDemo");
		rMenu = $("#rMenu");

		$("#expandAllBtn").bind("click", expandAll);
		$("#asyncAllBtn").bind("click", asyncAll);
		$("#resetBtn").bind("click", reset);
	}); 

	function searchNode(event) {
		$.post('/GPSTree/json/searchNodeByKeyword', { keyword : $("#txtDropDown").val() , queryType : $("#queryType").find("option:selected").attr("id") }, searchCallBack, 'json'); 
	}

	var json;
	
	function searchCallBack(data) {

		json = eval(data);

		for(var i = 0 ; i < json[0].result.length ; i ++) {

			var nodes = json[0].result[i];
			
			var node = zTree.getNodeByParam("id" , json[0].result[i][0].parentid , null);
	
			var newNode = {name : "" , isHidden : "true"};
			zTree.addNodes(node, newNode);
		
		}
		
		$.post('/GPSTree/json/waitClient', { keyword : $("#txtDropDown").val() }, waitCallBack, 'json'); 

	}

	function waitCallBack(data) {

		var isOpening = true;
		
		for(var i = 0 ; i < json[0].result.length ; i ++) {
			var node = zTree.getNodeByParam("id" , json[0].result[i][0].parentid , null);
			if(node.children == null)
				isOpening = false;
		}
		
		if(!isOpening)
			$.post('/GPSTree/json/waitClient', { keyword : $("#txtDropDown").val() }, waitCallBack, 'json'); 

		else {

			for(var i = 0 ; i < json[0].result.length ; i ++) {
				var node = zTree.getNodeByParam("id" , json[0].result[i][0].parentid , null);
				
				zTree.removeChildNodes(node);
		
				zTree.addNodes(node , json[0].result[i]);
		
				zTree.expandNode(node , true , true , true , false);
	
				expandNextNode(node);

			}
			
		}		
	}

	function expandNextNode(node) {

		if(node.children == null || node.children.length == 0) {
			zTree.expandNode(node, false, false, false);
			return ;
		}

		for(var i = 0 ; i < node.children.length ; i ++) {
			expandNextNode(node.children[i]);
		}

	}
	

</script>

</head>
<body>
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
</div>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加节点</li>
		<li id="m_del" onclick="removeTreeNode();">删除节点</li>
		<li id="m_check" onclick="checkTreeNode(true);">Check节点</li>
		<li id="m_unCheck" onclick="checkTreeNode(false);">unCheck节点</li>
		<li id="m_reset" onclick="resetTree();">恢复zTree</li>
	</ul>
</div>

[ <a id="expandAllBtn" href="#" onclick="return false;">全部展开</a> ] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
[ <a id="asyncAllBtn" href="#" onclick="return false;">后台自动全部加载</a> ]<br/><br/> 

<select id="queryType" name = "queryType" onchange="selectChange(event)">
	<option id = 'vehicle' selected="selected">车辆</option>
	<option id = 'line'>线路</option>
	<option id = 'organization'>组织</option>
</select>
<input type="text" id="txtDropDown" name="txtDropDown" onkeyup="change(event)" />
<button id="btnSearch" name="btnSearch" onclick="searchNode(event)" value="Search">Search</button>

<p class="highlight_red" id="demoMsg"></p>

</body>
</html>
